<template>
  <div>
    <!-- 面包屑导航 -->
    <el-breadcrumb separator="/" style="padding-left:10px; padding-bottom:10px; font-size:12px;">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>角色管理</el-breadcrumb-item>
    </el-breadcrumb>

    <!-- 主内容卡片 -->
    <el-card>
      <!-- 页面标题 -->
      <el-page-header @back="goBack" content="角色列表" style="margin-bottom: 20px;"></el-page-header>
      <!-- 操作按钮区 -->
      <div style="margin-bottom: 10px; display: flex; justify-content: space-between;">
        <!-- 添加角色按钮 -->
        <el-button type="success" icon="el-icon-plus" @click="openAddDialog">添加角色</el-button>
        <!-- 其他操作按钮可以在这里添加，例如批量删除等 -->
      </div>

      <!-- 角色数据表格 -->
      <el-table :data="roleData" size="small" border class="roleTable">
        <!-- 角色ID -->
        <el-table-column prop="roleId" label="角色ID" width="150"></el-table-column>
        <!-- 角色名 -->
        <el-table-column prop="roleName" label="角色名" width="200"></el-table-column>
        <!-- 角色权限 -->
        <el-table-column prop="permissions" label="角色权限" width="200">
          <template slot-scope="scope">
            <!-- 显示权限列表 -->
            <span>{{ scope.row.permissions.join(', ') }}</span>
          </template>
        </el-table-column>
        <!-- 是否启用 -->
        <el-table-column prop="enabled" label="是否启用" width="100"></el-table-column>
        <!-- 操作按钮 -->
        <el-table-column label="操作" width="150">
          <template slot-scope="scope">
            <div style="display: flex; justify-content: space-around;">
              <!-- 编辑按钮 -->
              <el-tooltip content="编辑" placement="top" effect="light">
                <el-button
                    circle
                    round
                    plain
                    size="small"
                    type="primary"
                    icon="el-icon-edit-outline"
                    @click="openEditDialog(scope.row)"
                ></el-button>
              </el-tooltip>
              <!-- 删除按钮 -->
              <el-tooltip content="删除" placement="top" effect="light">
                <el-button
                    circle
                    round
                    plain
                    icon="el-icon-delete"
                    type="danger"
                    size="small"
                    @click="deleteRole(scope.row)"
                ></el-button>
              </el-tooltip>
            </div>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页组件 -->
      <el-pagination
          style="margin-top:10px;"
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="queryMap.pageNum"
          :page-sizes="[6, 10, 20, 30]"
          :page-size="queryMap.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
      ></el-pagination>

      <!-- 添加/编辑角色对话框 -->
      <el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="500px">
        <el-form :model="roleForm" ref="roleForm" label-width="100px" class="form-container">
          <el-form-item
              label="角色ID"
              prop="roleId"
              :rules="[{ required: true, message: '请输入角色ID', trigger: 'blur' }]"
          >
            <!-- 角色ID输入框，禁用编辑 -->
            <el-input v-model="roleForm.roleId" :disabled="!!roleForm.roleId"></el-input>
          </el-form-item>
          <el-form-item
              label="角色名"
              prop="roleName"
              :rules="[{ required: true, message: '请输入角色名', trigger: 'blur' }]"
          >
            <!-- 角色名输入框 -->
            <el-input v-model="roleForm.roleName"></el-input>
          </el-form-item>
          <el-form-item
              label="角色权限"
              prop="permissions"
              :rules="[{ required: true, message: '请选择角色权限', trigger: 'change' }]"
          >
            <!-- 角色权限选择框 -->
            <el-select v-model="roleForm.permissions" multiple placeholder="请选择角色权限">
              <el-option
                  v-for="permission in permissions"
                  :key="permission.value"
                  :label="permission.label"
                  :value="permission.value"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item
              label="是否启用"
              prop="enabled"
              :rules="[{ required: true, message: '请选择是否启用', trigger: 'change' }]"
          >
            <!-- 是否启用选择框 -->
            <el-select v-model="roleForm.enabled" placeholder="请选择是否启用">
              <el-option label="启用" value="启用"></el-option>
              <el-option label="禁用" value="禁用"></el-option>
            </el-select>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <!-- 取消按钮 -->
          <el-button @click="dialogVisible = false">取消</el-button>
          <!-- 保存按钮 -->
          <el-button type="primary" @click="saveRole">保存</el-button>
        </span>
      </el-dialog>
    </el-card>
  </div>
</template>

<script>
import axios from "axios";

export default {
  data() {
    return {
      dialogVisible: false, // 控制对话框显示
      dialogTitle: "添加角色", // 对话框标题
      roleData: [], // 角色数据列表
      permissions: [
        { label: "查看", value: "查看" },
        { label: "新增", value: "新增" },
        { label: "修改", value: "修改" },
        { label: "删除", value: "删除" },
        // 其他权限
      ], // 权限列表
      multipleSelection: [], // 选中的角色
      total: 0, // 总角色数
      queryMap: {
        pageNum: 1, // 当前页码
        pageSize: 10, // 每页大小
      }, // 查询参数
      roleForm: {
        roleId: "", // 角色ID
        roleName: "", // 角色名
        permissions: [], // 角色权限
        enabled: "", // 是否启用
      }, // 角色表单数据
      mockRoles: [
        {
          roleId: "R001",
          roleName: "管理员",
          permissions: ["查看", "新增", "修改", "删除"],
          enabled: "启用",
        }
      ], // 模拟角色数据
    };
  },
  methods: {
    // 返回上一页
    goBack() {
      console.log("返回上一页");
    },
    // 获取角色列表
    async getRoleList() {
    },
    // 打开添加角色对话框
    openAddDialog() {
      this.dialogTitle = "添加角色";
      this.roleForm = {
        roleId: "",
        roleName: "",
        permissions: [],
        enabled: "",
      };
      this.dialogVisible = true;
    },
    // 打开编辑角色对话框
    openEditDialog(role) {
      this.dialogTitle = "编辑角色";
      this.roleForm = { ...role };
      this.dialogVisible = true;
    },
    // 删除角色
    deleteRole(role) {
      this.$confirm("确定要删除该角色吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
          .then(() => {
            // 删除逻辑
          })
          .catch(() => {
            // 取消删除
          });
    },
    // 处理分页大小变化
    handleSizeChange(newSize) {
      this.queryMap.pageSize = newSize;
      this.getRoleList();
    },
    // 处理当前页变化
    handleCurrentChange(current) {
      this.queryMap.pageNum = current;
      this.getRoleList();
    },
    // 保存角色
    saveRole() {
      // 保存逻辑
      this.$message.success("保存成功");
      this.dialogVisible = false;
      this.getRoleList();
    },
  },
  created() {
    this.getRoleList();
  },
};
</script>

<style scoped>

.conditions-container div {
  margin: 8px 23px;
}


.roleTable {
  width: 100%;
  margin: auto;
}

.el-row .el-col {
  font-size: 14px;
}

.el-row .el-col label {
  color: #5e6d82;
}
</style>